{#{% load grav_tag %}#}
<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>跨境电商产品推荐与展示系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/zerogrid.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <link rel="stylesheet" href="{% static 'css/comments.css' %}">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;600&display=swap" rel="stylesheet">
    <script src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/echarts.js' %}"></script>
</head>

<body style="background-color: #ffffff !important;">
    <div class="wrap-body">
        <header>
            <div class="wrap-header zerogrid">
                <div class="row header-content">
                    <div class="col-1-2">
                        <div class="wrap-col">
                            <div class="logo">
                                <a href="/" class="site-title">跨境电商产品推荐与展示系统</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-2">
                        <div class="wrap-col">
                            <form method="post" action="{% url 'search' %}" id="search" class="search-container">
                                {% csrf_token %}
                                <input name="search" type="text" class="ios-search" placeholder="搜索商品..." required />
                                <button type="submit" class="search-button">
                                    <i class="fas fa-search"></i>
                                    搜索
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row nav-container">
                    <nav class="ios-nav">
                        <ul class="ios-nav-list">
                            <li><a href="{% url 'index' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'index' or request.resolver_match.url_name == 'all_product' %} active{% endif %}">
                                    <i class="fas fa-home"></i>
                                    首页
                                </a></li>
                            <!-- 移除数据分析和词云分析的导航项 -->
                            <li><a href="{% url 'data_analysis' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'data_analysis' %} active{% endif %}">
                                    <i class="fas fa-chart-bar"></i>
                                    数据分析
                                </a></li>
                            <li><a href="{% url 'word_analysis' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'word_analysis' %} active{% endif %}">
                                    <i class="fas fa-cloud"></i>
                                    词云分析
                                </a></li>
                            {% if request.session.login_in == True %}
                            <li><a href="{% url 'personal' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'personal' or request.resolver_match.url_name == 'mycollect' or request.resolver_match.url_name == 'my_comments' or request.resolver_match.url_name == 'my_rate' %} active{% endif %}">
                                    <i class="fas fa-user"></i>
                                    {{ request.session.name }}
                                </a></li>
                            <li><a href="{% url 'logout' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'logout' %} active{% endif %}">
                                    <i class="fas fa-sign-out-alt"></i>
                                    退出登录
                                </a></li>
                            {% else %}
                            <li><a href="{% url 'login' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'login' %} active{% endif %}">
                                    <i class="fas fa-sign-in-alt"></i>
                                    登录
                                </a></li>
                            <li><a href="{% url 'register' %}" class="ios-nav-item{% if request.resolver_match.url_name == 'register' %} active{% endif %}">
                                    <i class="fas fa-user-plus"></i>
                                    注册
                                </a></li>
                            {% endif %}
                            <li>
                                <a href="/admin/" class="ios-nav-item">
                                    <i class="fas fa-cogs"></i>
                                    后台管理
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <!-- 将标签区域移到header外面 -->
        <div class="tags-section">
            <div class="tags-container">
                {% for tag in all_tags %}
                <a href="{% url 'one_tag' tag.id %}" class="tag-item">{{ tag.name }}</a>
                {% endfor %}
            </div>
        </div>

        <!--////////////////////////////////////Container-->
        <section id="container">
            <div class="wrap-container zerogrid">
                <div id="main-content" class="col-2-3">
                    {% block main_content %}
                    {% endblock %}
                </div>
                <div id="sidebar" class="col-1-3">
                    <div class="wrap-sidebar">
                        <div class="ios-card">
                            <h5 class="ios-title">
                                <i class="fas fa-clock"></i>
                                最近更新
                            </h5>
                            <div class="ios-list">
                                <div id="latest-product">
                                    {% for product in new_list %}
                                    <div class="ios-list-item">
                                        <a href="{% url 'product' product.id %}">{{ product.name | slice:":18"}}</a>
                                        <span class="ios-badge">新</span>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="ios-card">
                            <div class="ios-title">
                                <i class="fas fa-thumbs-up"></i>
                                基于用户推荐
                                <button onclick="get_user_recommend()" class="ios-button secondary">
                                    <i class="fas fa-sync-alt"></i>
                                    换一批
                                </button>
                            </div>
                            <div id="user-recommend" class="ios-list">
                                {% for product in user_recommend_list %}
                                <div class="ios-list-item">
                                    <div class="item-content">
                                        <a href="{% url 'product' product.id %}">{{ product.name | slice:":24"}}</a>
                                        <div class="meta">
                                            <span class="ios-tag">
                                                <i class="fas fa-store"></i>
                                                {{ product.shop_name }}
                                            </span>
                                            <span class="ios-tag">
                                                <i class="fas fa-star"></i>
                                                评价：{{ product.d_rate_nums }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--////////////////////////////////////Footer-->
        <footer>
            <div class="bottom-footer">
                <div class="wrap-bottom ">
                    <div class="copyright">
                        {# <p>©2020 <a href="http://www.colaplusice.com/" target="_blank">Colaplusice</a>跨境电商产品推荐系统</p>
                        #}
                    </div>
                </div>
            </div>
        </footer>


    </div>
    {#
    <script src="{% static 'js/css3-mediaqueries.js' %}"></script>#}
    {% block bottom-js %}
    {% endblock %}
    <script>
        function get_user_recommend() {
            $.ajax({
                url: '/user_recommend/',
                type: 'GET',
                success: function (result) {
                    var html = "";
                    var array_length = result.length;
                    for (var i = 0; i < array_length; i++) {
                        html += `
                        <div class="post">
                            <div class="image-container">
                                <a href="/product/${result[i].id}">
                                    <img src="${result[i].image_link}" alt="${result[i].name}"/>
                                </a>
                            </div>
                            <div class="wrapper">
                                <a href="/product/${result[i].id}">
                                    <h6>${result[i].name.substring(0, 24)}</h6>
                                </a>
                                <div class="meta">
                                    <span class="ios-tag">
                                        <i class="fas fa-store"></i>
                                        ${result[i].shop_name}
                                    </span>
                                    <span class="ios-tag">
                                        <i class="fas fa-star"></i>
                                        评价：${result[i].d_rate_nums}
                                    </span>
                                </div>
                            </div>
                        </div>
                    `;
                    }
                    $('#user-recommend').html(html);
                },
                fail: function (xhr, textStatus, errorThrown) {
                    alert('request failed');
                },
                error: function (jqXHR, exception) {
                    console.log(jqXHR.status);
                    console.log(exception);
                }
            });
        }

        get_user_recommend();

        function get_latest_product() {
            $.ajax({
                url: '/latest_product/',
                type: 'GET',
                success: function (result) {
                    var html = "";
                    var array_length = result.length;
                    for (var i = 0; i < array_length; i++) {
                        html += `<li><a href="/product/${result[i].id}" title="${result[i].name}">${result[i].name.substring(0, 20)}</a><span><img src="/static/images/hot.png"/></span></li>`;
                    }
                    $('#latest-product').html(html);
                },
                fail: function (xhr, textStatus, errorThrown) {
                    alert('request failed');
                },
                error: function (jqXHR, exception) {
                    console.log(jqXHR.status);
                    console.log(exception);
                }
            });
        }

        get_latest_product();

        document.addEventListener('DOMContentLoaded', function () {
            const dropdowns = document.querySelectorAll('.nav-dropdown');

            dropdowns.forEach(dropdown => {
                const trigger = dropdown.querySelector('.dropdown-trigger');

                // 点击触发
                trigger.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropdown.classList.toggle('active');
                });

                // 点击外部关闭
                document.addEventListener('click', (e) => {
                    if (!dropdown.contains(e.target)) {
                        dropdown.classList.remove('active');
                    }
                });

                // ESC键关闭
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        dropdown.classList.remove('active');
                    }
                });
            });

            // 导航栏激活状态切换
            const navItems = document.querySelectorAll('.ios-nav-item');
            
            navItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    // 不阻止默认行为，允许页面跳转
                    // 只是提供视觉反馈
                    
                    // 移除所有active类
                    navItems.forEach(nav => nav.classList.remove('active'));
                    
                    // 给当前点击的项添加active类
                    this.classList.add('active');
                });
            });

            // 页面加载时确保正确的激活状态
            function updateActiveNav() {
                const currentPath = window.location.pathname;
                
                navItems.forEach(item => {
                    item.classList.remove('active');
                    const href = item.getAttribute('href');
                    
                    // 检查当前路径是否匹配导航链接
                    if (href && (currentPath === href || 
                        (href === '/' && currentPath === '/') ||
                        (href.includes('data_analysis') && currentPath.includes('data_analysis')) ||
                        (href.includes('word_analysis') && currentPath.includes('word_analysis')) ||
                        (href.includes('personal') && (currentPath.includes('personal') || currentPath.includes('mycollect') || currentPath.includes('my_comments') || currentPath.includes('my_rate'))) ||
                        (href.includes('login') && currentPath.includes('login')) ||
                        (href.includes('register') && currentPath.includes('register')))) {
                        item.classList.add('active');
                    }
                });
            }

            // 页面加载时更新激活状态
            updateActiveNav();
        });
    </script>

</body>

</html>